<template>
	<view class="pl-2 py-3 flex align-center flex-wrap">
		<view class="card bg-white rounded-lg mr-2 mb-3" v-for="(item,index) in list" :key="index"
			@click="detail(item.user_id)">
			<view class="flex flex-column align-center ">
				<image src="../../../static/img/ic_default_head.png"
					style="width:80rpx;height: 80rpx;margin-top: 20rpx;" mode="">
				</image>
				<view class="overflow-hidden font22" style="height:50rpx;">{{item.user_name}}</view>
				<view class="mb-1 font24" v-if="item.temperature!=''">温度：{{item.temperature}}</view>
				<view class="mb-1 font24" v-else>温度：无</view>
				<view style="width: 120rpx; height: 40rpx; background-color: #FFA800; border-radius: 40rpx;"
					v-if="item.status=='1'" class="flex align-center justify-center font20 colorfff">
					在线
				</view>
				<view style="width: 120rpx; height: 40rpx; background-color: #999999; border-radius: 40rpx;"
					v-else class="flex align-center justify-center font20 colorfff">
					离线
				</view>
			</view>

		</view>
		<u-loading-page :loading="loadingPage" loading-text="加载中..." bg-color="rgba(000, 000, 000, 0.3)">
		</u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadingPage: false,
				list: []
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			detail(id) {
				uni.navigateTo({
					url: './studentDetail/studentDetail?id=' + id
				})
			},
			getData() {
				let this_ = this;
				this_.loadingPage = true;
				let opts = {
					url: 'Ls/SearchSb.shtml'
				};
				let param = {
					class_code: uni.getStorageSync('classcode')
				};
				this_.$http.httpRequest(opts, param).then(
					res => {
						this_.loadingPage = false;
						if (res.data.code == '200') {
							let data = res.data.data;
							this.list = data;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						this_.loadingPage = false;
					}
				);
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.card {
		width: 162rpx;
		height: 250rpx;
	}
</style>
